import React,{Component} from 'react';
import {
	Text,
  Image,
  StyleSheet,
  TouchableOpacity,
  View,
  TextInput,
} from 'react-native';
export default class SearchView extends Component{
	render(){
		return(
			<View style={[styles.searchView,this.props.style]}>
        <View style={styles.searchSubView}>
          <View style={styles.rightView}>
            <TouchableOpacity activeOpacity={0.5} onPress={this.props.search}>
              <Image style={styles.searchImg} source={require('../images/monitor_select.png')}/>
            </TouchableOpacity>
          </View>
          <TextInput 
            ref={this.props._ref}
            placeholder={this.props.placeholder}
            style={styles.searchInput}
            underlineColorAndroid="transparent"
            onChangeText={this.props.onChange}
            onBlur={this.props.onBlur}
            value={this.props.val}
            returnKeyType='search'
          />
          
          
        </View>
      </View>
		);
	}
}
const styles = StyleSheet.create({
  rightView:{
    flexDirection:'row',
    alignItems:'center',
    paddingLeft:0,
  },  
  splitLine:{
    marginRight:6,
    height:20,
    width:1,
    backgroundColor:'#aaa',
  },
	searchView:{
    flex:1,
    backgroundColor:'#fff',
    height:50,
    paddingTop:6,
    paddingBottom:4,
    paddingLeft:20,
    paddingRight:20,
  },
  searchSubView:{
    height: 36, 
    //borderColor: 'gray', 
    //borderWidth: StyleSheet.hairlineWidth,
    borderRadius:18,
    backgroundColor:'#d8d8d8',
    flexDirection:'row',
    alignItems:'center',
    paddingLeft:10,
    paddingRight:6,
  },
  searchInput:{
    padding:0,
    paddingLeft:5,
    flex:1,
    height: 36, 
    
  },
  searchImg:{
    marginLeft:5,
    width:20,
    height:20,
  },
});